<template>
    <div class="icons">
        <swiper :options="swiperOption">
            <swiper-slide>
                <div class="icon" v-for="item of list" :key="item.id" >
                    <div class='icon-img'>
                        <img class='icon-img-content' :src='item.imgUrl' />
                    </div>
                    <p class="icon-desc">{{item.desc}}</p>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
    export default {
        name: 'HomeIcons',
       /* props: {
            list: Array
        },*/
        data () {
            return {
                list:[
                    {
                        id : "1",
                        imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
                        desc:"故宫"
                    },
                    {
                        id:"2",
                        imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
                        desc:"故宫"
                    },
                    {
                        id:"3",
                        imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/3e/86314b2af03b7502.png",
                        desc:"故宫"
                    },
                    {
                        id:"4",
                        imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
                        desc:"故宫"
                    },
                    {
                        id:"5",
                        imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
                        desc:"故宫"
                    },
                    {
                        id:"6",
                        imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/fa/2548667cb6e902.png",
                        desc:"故宫"
                    },
                    {
                        id : "7",
                        imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
                        desc:"故宫"
                    },
                    {
                        id:"8",
                        imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
                        desc:"故宫"
                    },
                    {
                        id:"9",
                        imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/3e/86314b2af03b7502.png",
                        desc:"故宫"
                    }
                ],
                swiperOption: {
                    autoplay: false
                }
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~@/assets/styles/varibles.styl'
    @import '~@/assets/styles/mixins.styl'
    .icons >>> .swiper-container{
    height: 0;
    padding-bottom: 50%;}
    .icons{
        margin-top: .1rem;}
    .icon{
        position: relative;
        overflow: hidden;
        float: left;
        width: 25%;
        height: 0;
        padding-bottom: 25%;}
    .icon-img{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: .44rem;
        box-sizing: border-box;
        padding: .1rem;}
    .icon-img-content{
        display: block;
        margin: 0 auto;
        height: 100%;}
    .icon-desc{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: .44rem;
        line-height: .44rem;
        text-align: center;
        color: $darkTextColor;}

</style>
